<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
	<title>商品详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<link type="text/css" rel="stylesheet" href="css/flexslider.css">
	<link type="text/css" rel="stylesheet" href="css/rating.css">
	<link type="text/css" rel="stylesheet" href="css/share.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.flexslider.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript" src="js/cart.js"></script>
	<script type="text/javascript" src="js/favorite.js"></script>
	<script type="text/javascript" src="js/rating.js"></script>
	<script type="text/javascript" src="js/share.js"></script>
	<script>
		$(function() {
		  $('.flexslider').flexslider({
			animation: "slide",
			controlNav: "thumbnails"
		  });
		});
	</script>
</head>
<body>
	 
	





	<!--header-->
    <jsp:include page="/header.jsp"></jsp:include>
	<!--//header-->

	
	<!--//single-page-->
	<div class="single">
		<div class="container">
			<div class="single-grids">				
				<div class="col-md-4 single-grid">		
					<div class="flexslider">
						
						<ul class="slides">
							<li data-thumb="${g.cover}">
								<div class="thumb-image"> <img src="${g.cover}" data-imagezoom="true" class="img-responsive"> </div>
							</li>
							<li data-thumb="${g.image1}">
								 <div class="thumb-image"> <img src="${g.image1}" data-imagezoom="true" class="img-responsive"> </div>
							</li>
							<li data-thumb="${g.image2}">
							   <div class="thumb-image"> <img src="${g.image2}" data-imagezoom="true" class="img-responsive"> </div>
							</li> 
						</ul>
					</div>
				</div>	
				<div class="col-md-4 single-grid simpleCart_shelfItem">		
					<h3>${g.name}</h3>
					<div class="tag">
						<p>分类 : <a href="goods_list?typeid=${g.type.id}">${g.type.name}</a></p>
					</div>
					<p>${g.intro}</p>
					<div class="galry">
						<div class="prices">
							<h5 class="item_price">¥ ${g.price}</h5>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="btn_form">
						<a href="javascript:;" class="add-cart item_add" onclick="buy(${g.id})">加入购物车</a>
						<c:choose>
							<c:when test="${isFavorite}">
								<button id="favoriteBtn" class="btn btn-default" 
									onclick="removeFavorite(${g.id})"
									data-id="${g.id}">
									已收藏
								</button>
							</c:when>
							<c:otherwise>
								<button id="favoriteBtn" class="btn btn-success" 
									onclick="addFavorite(${g.id})"
									data-id="${g.id}">
									收藏
								</button>
							</c:otherwise>
						</c:choose>
						<button id="shareBtn" class="share-button">
							<i class="fas fa-share-alt"></i> 分享
							<span class="share-count">(${shareCount})</span>
						</button>
					</div>
					
					<!-- 商品评分概要 -->
					<div class="rating-summary" style="margin-top: 20px;">
						<div class="rating-score">
							<span class="rating-average">${String.format("%.1f", averageScore)}</span>
							<span class="rating-count">(${ratingCount}条评分)</span>
						</div>
						<div class="rating-stars">
							<c:forEach begin="1" end="5" var="i">
								<c:choose>
									<c:when test="${i <= averageScore}">
										<i class="fas fa-star"></i>
									</c:when>
									<c:when test="${i > averageScore && i-1 < averageScore}">
										<i class="fas fa-star-half-alt"></i>
									</c:when>
									<c:otherwise>
										<i class="far fa-star"></i>
									</c:otherwise>
								</c:choose>
							</c:forEach>
						</div>
						<a href="rating_list?goodsid=${g.id}" class="btn btn-link">查看全部评分</a>
					</div>
				</div>
				<div class="col-md-4 single-grid1">
					<!-- <h2>商品分类</h2> -->
					<ul>
                        <li><a  href="/goods_list">全部系列</a></li>

                        <c:forEach items="${typeList}" var="t">
                            <li><a href="/goods_list?typeid=${t.id}">${t.name}</a></li>
                        </c:forEach>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	
	<!-- 商品评分模块 -->
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="rating-container">
					<h3>商品评分</h3>
					
					<!-- 用户评分表单 -->
					<c:if test="${user != null}">
						<div class="rating-form">
							<form id="rating-form" action="rating_add" method="post">
								<input type="hidden" name="goodsid" value="${g.id}">
								<input type="hidden" id="score" name="score" value="${isRated ? userRating.score : '0'}">
								
								<div class="form-group">
									<label>您的评分：</label>
									<div class="rating-stars">
										<c:forEach begin="1" end="5" var="i">
											<c:choose>
												<c:when test="${isRated && i <= userRating.score}">
													<i class="fas fa-star" data-score="${i}"></i>
												</c:when>
												<c:otherwise>
													<i class="far fa-star" data-score="${i}"></i>
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</div>
								</div>
								
								<div class="form-group">
									<label>评论：</label>
									<textarea id="comment" name="comment" class="form-control" placeholder="请输入您的评论">${isRated ? userRating.comment : ''}</textarea>
								</div>
								
								<button type="submit" class="btn btn-primary">${isRated ? '更新评分' : '提交评分'}</button>
							</form>
						</div>
					</c:if>
					<c:if test="${user == null}">
						<div class="alert alert-info">
							请<a href="user_login.jsp">登录</a>后评分
						</div>
					</c:if>
					
					<!-- 最新评分列表 -->
					<div class="rating-list">
						<h4>最新评分</h4>
						<c:choose>
							<c:when test="${empty ratingList}">
								<div class="alert alert-info">
									<p>暂无评分记录！</p>
								</div>
							</c:when>
							<c:otherwise>
								<c:forEach items="${ratingList}" var="rating" begin="0" end="2">
									<div class="rating-item">
										<div class="rating-user">${rating.user.username}
											<c:if test="${user != null && user.id == rating.user_id}">
												<span class="label label-info">我的评分</span>
											</c:if>
										</div>
										<div class="rating-score">
											<c:forEach begin="1" end="5" var="i">
												<c:choose>
													<c:when test="${i <= rating.score}">
														<i class="fas fa-star"></i>
													</c:when>
													<c:otherwise>
														<i class="far fa-star"></i>
													</c:otherwise>
												</c:choose>
											</c:forEach>
										</div>
										<div class="rating-comment">${rating.comment}</div>
										<div class="rating-time">
											<fmt:formatDate value="${rating.create_time}" pattern="yyyy-MM-dd HH:mm:ss"/>
										</div>
									</div>
								</c:forEach>
								<c:if test="${ratingList.size() > 3}">
									<div class="text-center">
										<a href="rating_list?goodsid=${g.id}" class="btn btn-default">查看更多评分</a>
									</div>
								</c:if>
							</c:otherwise>
						</c:choose>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 分享模态框 -->
	<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content share-modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title share-title" id="shareModalLabel">分享商品</h4>
				</div>
				<div class="modal-body">
					<div class="share-options">
						<div class="share-option" onclick="shareToWechat(${g.id})">
							<div class="share-icon wechat">
								<i class="fab fa-weixin"></i>
							</div>
							<div class="share-label">微信 <span class="share-count">(${wechatShareCount})</span></div>
						</div>
						<div class="share-option" onclick="shareToWeibo(${g.id}, '${g.name}')">
							<div class="share-icon weibo">
								<i class="fab fa-weibo"></i>
							</div>
							<div class="share-label">微博 <span class="share-count">(${weiboShareCount})</span></div>
						</div>
						<div class="share-option" onclick="shareToQQ(${g.id}, '${g.name}')">
							<div class="share-icon qq">
								<i class="fab fa-qq"></i>
							</div>
							<div class="share-label">QQ <span class="share-count">(${qqShareCount})</span></div>
						</div>
						<div class="share-option" onclick="copyShareLink(${g.id})">
							<div class="share-icon link">
								<i class="fas fa-link"></i>
							</div>
							<div class="share-label">复制链接 <span class="share-count">(${linkShareCount})</span></div>
						</div>
					</div>
					<div class="share-tips">分享有礼，好友下单，获得积分奖励！</div>
				</div>
			</div>
		</div>
	</div>
	
	<!--footer-->
    <jsp:include page="/footer.jsp"></jsp:include>
	<!--//footer-->


</body>
</html>